<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>客户管理列表</title>
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/lib/layui/css/layui.css" />
		<script src="${BASE_PATH}/static/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="layui-tab">
			<ul class="layui-tab-title">
				<li class="layui-this">功能选择</li>
				<li>筛选搜索</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
					<button id="btn_user_add" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe654;</i>新增用户</button>
				</div>
				<div class="layui-tab-item">
				<form class="layui-form">
					<div class="demoTable">
						<div class="layui-form-item">
							<div class="layui-inline">
								<div class="layui-input-inline">
									<input type="tel" name="name" id="name" lay-verify="required|phone" autocomplete="off" class="layui-input" placeholder="输入用户姓名">
								</div>
							</div>
							<div class="layui-inline">
								<div class="layui-input-inline">
									<input type="tel" name="phone" id="phone" lay-verify="required|phone" autocomplete="off" class="layui-input" placeholder="输入电话号码">
								</div>
							</div>
							<div class="layui-inline">
								<div class="layui-input-inline">
									<a class="layui-btn"  data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</a>
								</div>
							</div>
						</div>
					</div>
				</form>
				</div>
			</div>
		</div>

		<table id="demo" lay-filter="test"></table>

	</body>
	<script type="text/html" id="barDemo">
		<!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="user_info">查看</a>-->
		<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
		
		{{#  if(d.state == 1){ }}
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="not">停用</a>
		{{#  } }}
		{{#  if(d.state == 2){ }}
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="not">启用</a>
		{{#  } }}
	</script>
	<script>
		layui.use(['table', 'element', 'laydate', 'layer', 'jquery'], function() {
			var table = layui.table;
			var element = layui.element;
			var laydate = layui.laydate;
			var layer = layui.layer;
			$ = layui.jquery;
			
			var state;


			table.render({
				elem: '#demo',
				//done: function(res, curr, count){
				//	var that = res.data;
				//	for(var i = 0;i<that.length;i++){  //循环LIST
                //         var veh = that[i];//获取LIST里面的对象
                //         if(veh.state == 1){
                //         	$(".state").text('启用');
                //         	state = veh.state
                //         	console.dir(state)
                //         }else if(veh.state == 2){
                //         	$(".state").text('停用');
                //         	state = veh.state
                //         	console.dir(state)
                //         }
                //      }
				//  },
				request: {
					pageName: 'pageNum' //页码的参数名称，默认：page
						,
					limitName: '16'
				},
				url: '${BASE_PATH}/admin/manage/ajax_manage_user_list',
				page: true,
				id: 'testReload',
				limit: 16,
				limits:[10,15,20,25,30],
				cols: [
					[ //表头
						{
							field: 'userId',
							title: '客户ID',
						}, {
							field: 'name',
							title: '用户姓名',
						}, {
							field: 'phone',
							title: '用户名',
							sort: true
						}, {
							field: 'createTime',
							title: '创建时间',
						}, {
							field: 'stateName',
							title: '状态',
							sort: true
						}, {
							field: 'role',
							title: '角色',
							sort: true
						}, {
							field: 'amount',
							title: '操作',
							sort: true,
							align: 'center',
							toolbar: '#barDemo'
						}
					]
				]
			});

			//监听工具条
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				var layEvent = obj.event;
				var tr = obj.tr;

				if(layEvent === 'user_info') {
					layer.open({
						type: 2,
						content: 'user_info.htm?yhUserId=' + data.yhUserId,
						area: ['1200px', '800px']
					});
				} else if(layEvent === 'not') {
					var userId = data.userId;
					var state;
					if(data.state == 1){
						state =2;
					}else if(data.state == 2){
						state = 1;
					}
					$.ajax({
						url:'${BASE_PATH}/admin/manage/ajax_manage_update_user_state',
						data:{
							userId:userId,
							state:state
						},
						success:function(res){
							if(res.success == true && res.code == 200){
								layer.msg(res.msg)
								location.replace(location.href);
							} else if(res.success == false){
								layer.msg(res.msg)
							}
						}
					})
					
				} else if(layEvent === 'edit') {
					layer.open({
						type: 2,
						content: 'user_edit.htm?userId=' + data.userId,
						area: ['700px', '400px']
					});
				}
			});

			$("#btn_user_add").on("click", function() {
				layer.open({
					type: 2,
					content: 'manage_user_add',
					area: ['700px', '400px']
				});
			});
			
			var $ = layui.$, active = {
		        reload: function(){
		
		            table.reload('testReload', {
		                where: {
		                    name: $("#name").val(),
		                    phone:$("#phone").val()
		                }
		            });
		        }
		    };
		    
		    $('.demoTable .layui-btn').on('click', function(){
			    var type = $(this).data('type');
			    active[type] ? active[type].call(this) : '';
			});

		});
	</script>

</html>